<!DOCTYPE html>
<html>

<head>
    <title>CGI Video Stream</title>
    <style>
        /* 添加基本的CSS样式 */
        ul.menu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        ul.menu li {
            float: left;
        }

        ul.menu li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 鼠标悬停时的样式 */
        ul.menu li a:hover {
            background-color: #111;
        }

        .button.gray {
            color: #8c96a0;
            text-shadow: 1px 1px 1px #fff;
            border: 1px solid #dce1e6;
            box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
            background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: linear-gradient(top, #f2f3f7, #e4e8ec);
        }

        .button.black {
            border: 1px solid #333;
            box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;
            background: -webkit-linear-gradient(top, #656565, #4c4c4c);
            background: -moz-linear-gradient(top, #656565, #4a4a4a);
            background: linear-gradient(top, #656565, #4a4a4a);
        }

        .button.red {
            border: 1px solid #b42323;
            box-shadow: 0 1px 2px #e99494 inset, 0 -1px 0 #954b4b inset, 0 -2px 3px #e99494 inset;
            background: -webkit-linear-gradient(top, #d53939, #b92929);
            background: -moz-linear-gradient(top, #d53939, #b92929);
            background: linear-gradient(top, #d53939, #b92929);
        }

        .button.yellow {
            border: 1px solid #d2a000;
            box-shadow: 0 1px 2px #fedd71 inset, 0 -1px 0 #a38b39 inset, 0 -2px 3px #fedd71 inset;
            background: -webkit-linear-gradient(top, #fece34, #d8a605);
            background: -moz-linear-gradient(top, #fece34, #d8a605);
            background: linear-gradient(top, #fece34, #d8a605);
        }

        .button.green {
            border: 1px solid #64c878;
            box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset, 0 -2px 3px #b9ecc4 inset;
            background: -webkit-linear-gradient(top, #90dfa2, #84d494);
            background: -moz-linear-gradient(top, #90dfa2, #84d494);
            background: linear-gradient(top, #90dfa2, #84d494);
        }

        .button.blue {
            border: 1px solid #1e7db9;
            box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px #8fcaee inset;
            background: -webkit-linear-gradient(top, #42a4e0, #2e88c0);
            background: -moz-linear-gradient(top, #42a4e0, #2e88c0);
            background: linear-gradient(top, #42a4e0, #2e88c0);
        }

        #relativeDiv {
            position: relative;
            top: 25px;
            /* 向下移动20px */
            left: 1100px;
        }

        #relativeIframeDiv {
            position: absolute;
            top: 75px;
            /* 向下移动20px */
            left: 50px;
        }

    </style>
</head>

<body>
    <ul class="menu">
        <li><a href="/cgi-bin/scan_dir_cgi.cgi">Photo_Manage</a></li>
        <li><a href="ffmpeg_config.html">Edit_URL</a></li>
        <li><a href="ffmpeg_config.html">URL_Manage</a></li>
        <li><a href="ffmpeg_mp4_config.html">EDIT_MP4</a></li>
        <li><a href="decode_video.html">Remote_Moniting</a></li>
        <li><a href="/cgi-bin/scan_video_cgi.cgi">Video_Manage</a></li>
    </ul>

    <div style="text-align: center;">
        <img src="/cgi-bin/sharemeomory_vdec_cgi.cgi" width="500" height="500" />
    </div>

    <div id="relativeDiv">
        <button type="button" class="button yellow"
            onclick="window.location.href='/cgi-bin/snap_rv1126_vdec_picture.cgi'">Snap_Image</button>
        <button type="button" class="button green"
            onclick="window.location.href='/cgi-bin/start_record_cgi.cgi'">Start_Record</button>
        <button type="button" class="button blue"
            onclick="window.location.href='/cgi-bin/stop_record_cgi.cgi'">Stop_Record</button>
    </div>
    
    <div id="relativeIframeDiv">
    <iframe src="/cgi-bin/sharemeomory_vdec_param.cgi" width="600" height="500" frameboder="0" scrolling="no"
        style="opacity: 0.5; border: none;"></iframe>
    </div>
    


</body>

</html>